<template>
  <div>
    <a-form layout="inline" class="formModel">
      <a-row :gutter="48">
        <a-col :md="6" :sm="24"> </a-col>

        <a-col :md="12" :sm="24" style="text-align:right">
          <a-range-picker
            :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
            @change="onChange"
            v-model="showTime"
            style="width:300px"
          />
        </a-col>

        <a-col :md="6" :sm="24">
          <a-select v-model="queryParam.flag" placeholder="请选择类型" @change="typeChange">
            <a-select-option value="2">宽带装机</a-select-option>
            <a-select-option value="1">互联网加装</a-select-option>
            <a-select-option value="0">所有</a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-form>
    <div id="container"></div>

    <!-- <详情> -->
    <WayTableDetail v-if="showPage" @cancelEvent="cancelEvent" :info="info"></WayTableDetail>

    <!-- <当前受理> -->
    <WayTableDayDetail v-if="dayshowPage" @cancelEvent="cancelEvent" :info="info"></WayTableDayDetail>
  </div>
</template>

<script>
import WayTableDetail from '@/views/analysisManage/enterpriseWide/detailModel/wayTableDetail'
import WayTableDayDetail from '@/views/analysisManage/enterpriseWide/detailModel/wayTableDayDetail'
import { getQkIngTotal } from '@/api/qkApi'
import moment from 'moment'
import { GroupedColumn } from '@antv/g2plot'
import {} from '@/utils/util'
import {} from '@/api/public'
export default {
  components: { WayTableDetail, WayTableDayDetail },
  data() {
    return {
      searchType: 1,
      queryParam: {},
      chartPlot: '',
      showTime: '',
      info: {},
      showPage: false,
      dayshowPage: false
    }
  },

  created() {
    this.queryParam.startTime = moment()
      .subtract(7, 'days')
      .startOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
    this.queryParam.endTime = moment()
      .endOf('day')
      .format('YYYY-MM-DD HH:mm:ss')
    this.showTime = [moment(this.queryParam.startTime), moment(this.queryParam.endTime)]
    this.getDataInfo()
  },
  mounted() {},
  methods: {
    //取消详情弹窗
    cancelEvent() {
      this.showPage = false
      this.dayshowPage = false
    },
    // 标签切换
    callBack(key) {},
    moment,
    //快开图标 显示回单数据
    charInit(openData) {
      this.chartPlot = new GroupedColumn(document.getElementById('container'), {
        data: openData,
        xField: 'country',
        yField: 'value',
        yAxis: {
          min: 0
        },
        groupField: 'type',
        label: {},
        forceFit: true,
        legend: {
          visible: false
        },
        meta: {
          country: {
            alias: '区县'
          },
          value: {
            alias: '数值'
          }
        },
        events: {
          onColumnClick: e => {
            this.info.country = e.data.country
            this.info.startTime = this.queryParam.startTime
            this.info.endTime = this.queryParam.endTime
            e.data.type == '当日受理' ? (this.dayshowPage = true) : (this.showPage = true)
          }
        }
      })
      this.chartPlot.render()
    },
    typeChange(e) {
      this.searchType = 2
      this.getDataInfo()
    },
    //派单时间
    onChange(date, dateString) {
      if (dateString[0].length == 0) {
        delete this.queryParam.startTime
        delete this.queryParam.endTime
      } else {
        this.queryParam.startTime = dateString[0] + ' 00:00:00'
        this.queryParam.endTime = dateString[1] + ' 23:59:59'
      }
      this.searchType = 2
      this.getDataInfo()
    },
    //表格数据查询
    getDataInfo() {
      getQkIngTotal(this.queryParam).then(
        res => {
          if (res.code == 200) {
            let dataList = []
            res.data.map(function(currentValue, index, arr) {
              let infoA = {}
              let infoB = {}
              let infoC = {}
              infoA.type = '产出'
              infoA.country = currentValue.country
              infoA.value = currentValue.rateNum
              infoB.type = '当前在途'
              infoB.country = currentValue.country
              infoB.value = currentValue.totalNum
              infoC.type = '当日受理'
              infoC.country = currentValue.country
              infoC.value = currentValue.yesterdayNum
              dataList.push(infoA)
              dataList.push(infoB)
              dataList.push(infoC)
            })
            this.searchType == 1 ? this.charInit(dataList) : this.chartPlot.changeData(dataList)
          } else {
            this.$message.error(res.msg)
          }
        },
        error => {
          this.$message.error(error)
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.fk1 {
  width: 12px;
  height: 12px;
}
.fkcompany {
  font-size: 12px;
  font-weight: 500;
  color: #3e3e3e;
  margin-left: 10px;
  margin-top: -2px;
}
.rangePicker {
  width: 220px;
  position: absolute;
  right: 10px;
  line-height: 56px;
  z-index: 11;
}
.weidabiao1 {
  float: right;
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  // padding-top: 1px;
}

.weidabiao1-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5dce3c;
  float: right;
}
.weidabiao2-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #e5703e;
  float: right;
}
.weidabiao3-color {
  width: 12.8px;
  margin: 4px;
  height: 12.8px;
  background: #5687f4;
  float: right;
}
</style>
